<template>
  <div>
    <a-select v-bind="attrs" v-on="listeners" style="width:100%;">
      <a-select-option v-if="showAll" value="all">全部</a-select-option>
      <a-select-option v-for="(item,index) in newData" :key="item.value">{{item.label}}</a-select-option>
      <!-- 处理 scopedSlots -->
      <template v-for="slotName of $scopedSlots" :slot="slotName">
        <slot :name="slotName"></slot>
      </template>
      <!-- 处理 slots -->
      <template v-for="slotName of this.$slots" v-slot:[slotName]>
        <slot :name="slotName"></slot>
      </template>
    </a-select>
  </div>
</template>

<script>
const filterTreeNode = function (inputValue, option) {
  if (option.componentOptions.children.length) {
    return option.componentOptions.children[0].text.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
  }
}
export default {
  name: '',
  components: {},
  data () {
    return {
      newData: [],
      settings: {
        showSearch: true,
        filterOption: filterTreeNode,
        placeholder: '请选择',
        dropdownStyle: { maxHeight: '400px', overflow: 'auto' }
      }
    }
  },
  props: {
    value: {
      default: undefined
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    showAll: {
      type: Boolean,
      default: false
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    extraLabel: {
      type: String,
      default: ''
    }
  },
  computed: {
    attrs () {
      return Object.assign(this.settings, this.$attrs, { value: this.value })
    },
    listeners () {
      return Object.assign({}, this.$listeners)
    }
  },
  watch: {
    dataSource: {
      handler (val, oldVal) {
        this.newData = val.map(item => {
          return {
            label: this.extraLabel ? `${item[this.labelKey]} (${item[this.extraLabel]})` : item[this.labelKey],
            value: item[this.valueKey]
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {

  },
  filters: {},
  created () { },
  mounted () { },
  beforeDestroy () { },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style  scoped>
</style>
